<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Mode de jeu : Facile !</title>
	<link rel ="stylesheet" type="text/css" href="css/reset.css">
	<link rel ="stylesheet" type="text/css" href="css/style.css">
	<link rel ="stylesheet" type="text/css" href="css/fancybox-1.3.4.css">
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquizme.js"></script>
	<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
	<script type="text/javascript">
	
	$(document).ready(function(){
		
		$( function($){
			var quiz = [
		        {
		                ques: "Quelle est la couleur du cheval blanc d'Enri IV ?", //question
		                ans: "Gris par la poussière.", // Correct answer
		                ansSel : "Bleu ?" // Wrong answer
		        },
		        {
		                ques: "En quelle anné Steeve Jobs est il mort ?", 
		                ans: "2011",
		                ansSel: "Tonton Steeve est immortel !"
		        }
			];
			var options = {
			        addToEnd: " has what periodic symbol ?",
			        quizType: "fill"  //Or you can write fillInTheBlank instead of fill.
			};
			var lang = {
	                ans:{   // _lang.ans are shown during the display of .q-result, the answer result.
	                        corrAns: "La bonne réponse était :",
	                        praise: 'Bien joué !',
	                        whyAns: "Infos:",
	                        yourAns: "Votre réponse :"
	                },
	                btn:{   // [ "text", "title" ]
	                        begin: [ "Que le quizz commence !" ],
	                        check: [ "Valider" ],
	                        del: [ "Quitter", "Quitter le quiz" ],
	                        help: [ "Aide", 'Besoin d\'aide ?'],
	                        next: [ "Suivant" ],
	                        restart: [ "Recommencer", "Quitter et recommencer le quiz" ],
	                        details: [ "Statistiques" ],
	                        review: [ "Détails des réponses" ],
	                        showOnlyMissed: [ "", "Click to show only missed questions." ],
	                        quit: [ "Quitter", "Quitter le quiz" ],
	                        quitNo: [ "Revenir", "Back" ],
	                        quitYes: [ 'Quitter', "Yes" ]
	                },
	                err:{
	                        badQType: "Quiz non-valide",
	                        badKey: "Clé non-valide",
	                        error: "Erreur", 
	                        noQType: "Aucun type de quizz selectonné",
	                        noQues: "Ce quizz n'a pas de question",
	                        notArr: "Doit être un tableau",
	                        notObj: "Doit être un objet"
	                },
	                stats:{
	                        right: "Réponses correct",
	                        rate: "Pourcentage de réussite",
	                        score: "Votre score",
	                        wrong: "Réponses incorrect",
	                        total: "Total",
	                        tried: "Essais"
	                },
	                quiz:{
	                        tfFalse: "Faux",
	                        tfTrue: "Vrai"
	                }
	        }
	        	        
			$( "#quiz-area" ).jQuizMe( quiz, { quizType: "multiList" }, lang, options );
		});
			
		// Init countdown
		/*
			Class:    	countDown
			Author:   	David Walsh
			Website:    http://davidwalsh.name
			Version:  	1.0.0
			Date:     	11/30/2008
			Built For:  jQuery 1.2.6
		*/
		
		jQuery.fn.countDown = function(settings,to) {
			settings = jQuery.extend({
				startFontSize: '22px',
				endFontSize: '22px',
				duration: 1000,
				startNumber: 30,
				endNumber: 0,
				callBack: function() { }
			}, settings);
			return this.each(function() {
				
				//where do we start?
				if(!to && to != settings.endNumber) { to = settings.startNumber; }
				
				//set the countdown to the starting number
				$(this).text(to).css('fontSize',settings.startFontSize);
				
				//loopage
				$(this).animate({
					'fontSize': settings.endFontSize
				},settings.duration,'',function() {
					if(to > settings.endNumber + 1) {
						$(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1);
					}
					else
					{
						settings.callBack(this);
					}
				});
						
			});
		};
		
		$('.time').countDown({
			startNumber: 90,
			callBack: function(gameOver) {
				$('.looser-popin').fancybox({
					overlayOpacity : '0.8',
					overlayColor : '#000',
					titleShow : false,
					showCloseButton : false,
					enableEscapeButton : false,
					scrolling : 'no'
				}).trigger('click');
			}
		});
	});
	
	</script>
</head>

<body>
<div id="fb-root"></div>
	<div id="container">
		<div class="header">
			<div class="col-left">
		    	<div class="col-left">
				<div id="user-infos">
		    		<div class="user-pic"><!-- User picture call --></div>
		    		<div class="user-name"><!-- User name call --></div>
		    	</div>
		        <div class="user-tab-infos">
		        	<p>Score: <span>1000</span></p>
		            <p>Trophés: <span>1000</span></p>
		            <p>Amis: <span>1000</span></p>
		            <p>Crédits: <span>1000</span></p>
		        </div>
		    </div>
		    </div>
	        <div class="logo">
	        	<div><a href="index.php"><img src="images/logo.png" alt="HQ !"/></a></div>
	        </div>
	        <div class="col-right">
		        <div class="fb-like" data-href="http://localhost/" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div>
		        <div class="fb-send" data-href="http://localhost/"></div>
		        <div class="back-button"><a href="#">Revenir sur ma page</a></div>
		    </div>
	    </div>
	    <div class="content">
	    	<div id="headings">
	    		<p class="time">07</p>
	    		<h1>Mode <b>Facile</b></h1>
	    	</div>
			<div id="quiz-area"></div>
			<a href="looser.php" class="looser-popin" style="display: none;">popin</a>
	    </div>
	</div>
	<script type="text/javascript" src="js/facebook.js"></script>
</body>
</html>
